<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商城首页模板</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link href="css/common.css" rel="stylesheet" type="text/css" />
	<link href="css/tuangou.css" rel="stylesheet" type="text/css" />
	
</head>
<body>
<section class="jq22-flexView">
	<header class="jq22-navBar jq22-navBar-fixed">
		<div class="jq22-center">
			<div class="jq22-search-box">
				<i class="icon icon-search"></i>
				<input type="text" id='searchIpt' placeholder="搜索一万件好东西">
				<span id='searchBtn'>搜素</span>
			</div>
		</div>
		<a href="javascript:;" class="jq22-navBar-item" ></a>
	</header>
	<section class="jq22-scrollView">
		<div class="m-slider" data-ydui-slider>
			<!--  -->
			<div class="slider-wrapper" style="height: 300px;">
			
			</div>
			<!-- <div class="slider-pagination" style="position: absolute;bottom: 20px;"></div> -->
		</div>
		<div class="divHeight"></div>
		
		<div class="divHeight"></div>
	
		<div class="jq22-news-area">
			<div class="jq22-news-area-box" id="scrollBox">
				<div class="jq22-flex">
					<div class="jq22-flex-box">
						<h2>团购商品</h2>
					</div>
				</div>
				<div class="jq22-list-theme-box"></div>
				<div class="loading" id="loading" style="display: none;">拼命加载中...</div>
				<div class="noMore" id="noMore" style="display: none;">没有更多商品了...</div>
			</div>
		</div>
	   </section>
</section>
</body>
<script src="js/jquery-1.8.2.min.js"></script>
<!-- <script type="text/javascript" src="js/slider.js"></script> -->
<script type="text/javascript" src="js/touchSlider.js"></script>
<script src="./js/request.js"></script>
<script>
	function clicktorn(item){
		console.log("goods:"+item);
		 let params = {
               	item:item,
            };
         window.ReactNativeWebView.postMessage(JSON.stringify(params));
	}
    function getBanner(){
		var str = ``,strPag = ``;
		request('goods/getCarouselGroupGoods').then(data=>{
			console.log(data)
			for(var i = 0;i<data.res.length;i++){
                str += `
				<div class="slider-item">
					<a href="javascript:;">
						<img src="${data.res[i].img}" alt="">
					</a>
				</div>
				`
				strPag += `<a></a>`
			}
			$('.slider-pagination').html(strPag)
			$('.slider-wrapper').html(str);
			$(".m-slider").touchSlider({
				flexible: true,
                    speed: 200,
                    paging: $(".slider-pagination a"),
                    counter: function(e) {
                        $(".slider-pagination a").removeClass("on").eq(e.current - 1).addClass("on");
            
                    }
			})
		})
	}
	getBanner()


	$('#searchBtn').bind('click',function(){
		 var data = {
			 key:$('#searchIpt').val(),
			 page:0,
			 size:10
		 }
		 getGroupgoods(data)
	})
    

	var sendData = {page:0,size:6}
	var arrContent = [];
	var totalPages = 0;
	function getGroupgoods(data){
		var str = ``;
		$("#loading").css('display','block')
		request('goods/getGroupgoods',data).then(data=>{
			var content = data.res.content;
			totalPages = data.res.totalPages;
		
			$("#loading").css('display','none')
			
			if(content.length){
                arrContent.push(...content)
				for(var i = 0;i<arrContent.length;i++){
					str += `
						<a href="javascript:void(0);" class="jq22-list-item" onclick=clicktorn(${arrContent[i].id})>
							<div class="jq22-list-theme-img">
								<img src="${arrContent[i].cover}" alt="">
							</div>
							<div class="jq22-list-theme-message">
								<h3 class="jq22-list-theme-title">${arrContent[i].name}</h3>
							
								<h4>拼团价￥${arrContent[i].price}</h4>
							</div>
						</a>`
				}
				$('.jq22-list-theme-box').append(str)
				$('.jq22-list-theme-box > a').on('click',function(){
					var index = jQuery(this).index();
					localStorage.setItem('productItem',JSON.stringify(arrContent[index]))
				})
			}else{
				if( sendData.page == 0 && content.length === 0){
					$('.jq22-list-theme-box').html('<p class="noData">暂无数据!</p>')
				}
				
				if( sendData.page -1 == totalPages ){
					$('#noMore').css('display','block')
				}
				
			}
		})
	}

    
	
	getGroupgoods(sendData)

	$('#scrollBox').bind('scroll',function(){
		
		if(sendData.page<=totalPages){
			var h = $(this).height();//div可视区域的高度
			var sh = $(this)[0].scrollHeight;//滚动的高度，$(this)指代jQuery对象，而$(this)[0]指代的是dom节点
			var st =$(this)[0].scrollTop;//滚动条的高度，即滚动条的当前位置到div顶部的距离
			if(h + st == sh){
			//上面的代码是判断滚动条滑到底部的代码
			sendData.page +=1;
			console.log(sendData)
				getGroupgoods(sendData)
			}
		   
		}
	})

	
</script>
</html>
